import React, { useState, useEffect }  from 'react'
import { Form, Select, Input, Col, DatePicker, Table } from 'antd'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetchRefundList } from '@/services/dataCenter/financeData'
import moment from 'moment'
const {RangePicker} = DatePicker

const RefundForm = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [startTime, setStartTime] = useState('')
  const [endTime, setEndTime] = useState('')
  const [total, setTotalPage] = useState(null)
  const [refundList, setRefundList] = useState([])

  const dateFormat = 'YYYY-MM-DD'



  // 按钮处理
  const handleBtn = type => {

  }

  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }

  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
    payTypes: [],
  })
  useEffect(() => {
    init()
  }, [])
  const init = async (param) => {
    const res = await fetchRefundList({param})
    setRefundList(res.data)
    setTotalPage(res.total)
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      init({
        ...param,
        ...values,
        startTime: startTime,
        endTime: endTime
      })
    })
  }
  // 选择时间
  const selectData = (date, dateString) => {
    setStartTime(dateString[0])
    setEndTime(dateString[1])
  }
  // 查询条件
  const getFields = () => {
    return(<>
      <Col span={6}>
        <Form.Item required label="选择门店" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('storeId', {})
            (<Select></Select>)}
        </Form.Item>
      </Col>
      <Col span={6}>
        <Form.Item required label="订单号" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('orderNo', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={6}>
        <Form.Item required label="选择日期" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`vistTime`, {
            initialValue: [moment(), moment()]
          })
            (<RangePicker onChange={selectData} format={dateFormat} />)}
        </Form.Item>
      </Col>
    </>)
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      init({
        ...param,
        pageNo: page,
      })
    }
  }
  const refundCol = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '门店名称',
      dataIndex: 'storeName',
      key: 'storeName',
    },
    {
      title: '退款订单号',
      dataIndex: 'refundOrderNo',
      key: 'refundOrderNo',
    },
    {
      title: '原订单号',
      dataIndex: 'orderNo',
      key: 'orderNo',
    },
    {
      title: '订单来源',
      dataIndex: 'platForm',
      key: 'platForm',
    },
    {
      title: '退款金额',
      dataIndex: 'refundAmount',
      key: 'refundAmount',
      render: (v, r, i) => {
        return (<span>￥ {v}</span>  )
      }
    },
    {
      title: '退款原因',
      dataIndex: 'refundReason',
      key: 'refundReason',
    },
    {
      title: '退款状态',
      dataIndex: 'refundStatusName',
      key: 'refundStatusName',
    },
  ]
  return (<Form layout={formLayout}>
    <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    <Table rowKey={record => record.id} pagination={pagination} size="small" columns={refundCol} dataSource={refundList}/>
  </Form>)
}


export default Form.create({})(RefundForm)
